<template>
  <div class="menu">
    <el-menu
      :default-active="this.$route.path"
      router
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
    >
    <el-menu-item :index="item.name" v-for="(item, index) in navList" :key="index">{{item.navItem}}</el-menu-item>
    <div class="flex-grow" />
    <div class="oneTechonolege" @click='open'>
      <Dialogtree/>
    </div>
      </el-menu>
    </div>
  </template>


   <script lang="ts">
   import{ref} from 'vue'
     import Dialogtree from '../../components/diologtree/dialog.vue'
   import { ElMessage, ElMessageBox } from 'element-plus'
   import {reqInteresting} from '../../api/home'
  import useBannerstore from '../../store/home'
  const bannerStore= useBannerstore()
  let interesting =ref({})
  export default {
      data() {
      return {
          navList:[
              {name:'/home', navItem:'推荐'},
              {name:'/home/original',navItem:'作品'},
              {name:'/home/course',navItem:'教程'},
              {name:'/home/specialTopic',navItem:'专题'},
              {name:'/home/information',navItem:'动态'},
              {name:'/home/attention',navItem:'关注'},
              // {name:'/home/classic',navItem:'古典舞'},
              // {name:'/home/classic',navItem:'芭蕾形体'},
              // {name:'/home/classic',navItem:'舞蹈知识'},
              // {name:'/home/classic',navItem:'莎莎舞'},
              // {name:'/home/classic',navItem:'胶州yangge'},
          ]
                         
      }
    },
    components:{
      Dialogtree
  },
    
    methods: {
      handleSelect(key, keyPath) {
        },
      // async open(){
      // let interesting = await reqInteresting()
      //  interesting.value=interesting
      //  console.log(interesting)
      // }
      // class="oneTechonolege"
    }

  }
  </script>
   
  <style >
 .el-menu--horizontal{
    border-bottom: none;
    padding: 0 20px 0px 280px;
    /* margin: 0 auto  ; */
    /* position: fixed; */
  }
  .el-menu--horizontal>.el-menu-item{

   margin: 0 14px;
  
  }
  .flex-grow{
    flex-grow: 1;
  }
  /* 导航栏 */
  .oneTechonolege{
    
  display: flex;
align-items: center;

  }
  </style>